<template>
    <template v-for="item in menuList">
        <template v-if="item.path !== '' && item.children && item.children.length > 0">
            <el-sub-menu :index="item.name" :disable="item.meta?.disable" :popper-append-to-body="false">
                <template #title>
                    <el-icon>
                        <component :is="item.meta?.icon" />
                    </el-icon>
                    <span slot="title">{{ item.meta?.title }}</span>
                </template>
                <MenuTree :menu-list="item.children" @click-item="clickItemHandle" />
            </el-sub-menu>
        </template>
        <template v-else-if="item.path === '' && item.children && item.children.length === 1">
            <el-menu-item :index="item.children[0].name" :disabled="item.children[0].meta?.disabled"
                :popper-append-to-body="false" @click="clickItemHandle(item.children[0])">
                <el-icon>
                    <component :is="item.children[0].meta?.icon" />
                </el-icon>
                <span slot="title">{{ item.children[0].meta?.title }}</span>
            </el-menu-item>
        </template>
        <template v-else>
            <el-menu-item :index="item.name" :disabled="item.meta?.disabled" :popper-append-to-body="false"
                @click="clickItemHandle(item)">
                <el-icon>
                    <component :is="item.meta?.icon" />
                </el-icon>
                <span slot="title">{{ item.meta?.title }}</span>
            </el-menu-item>
        </template>
    </template>
</template>
<script lang="ts" name="MemuTree" setup>
import type { RouteRecordRaw } from 'vue-router';

const { menuList } = defineProps(['menuList'])
const emit = defineEmits(['click-item'])

const clickItemHandle = (item: RouteRecordRaw) => {
    emit("click-item", item);
}
</script>